<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>患者360视图系统</title>
    <link href="/wwwroot/elementui/theme-chalk/index.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/base.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/ui-base.css" rel="stylesheet"/>
    <link href="/wwwroot/iconfont/iconfont.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/watermarkt.css" rel="stylesheet"/>
    <script src="/wwwroot/Vue/vue.min.js"></script>
    <script src="/wwwroot/Vue/vue-router.js"></script>
    <script src="/wwwroot/Vue/axios.min.js"></script>
    <script src="/wwwroot/Scripts/jquery-2.2.3.min.js"></script>
    <script src="/wwwroot/Scripts/base.js?dt=20201219"></script>
    <script src="/wwwroot/Scripts/xmlhelper.js"></script>
    <script src="/wwwroot/elementui/index.js?p=1"></script>
    <script src="/wwwroot/Scripts/echarts.min.js"></script>
    <script src="/wwwroot/Scripts/waterMark.js"></script>

    <style>
        .el-form-item__label {
            color: white;
        }

        .FSSYClass {
            height: 100% !important;
        }
    </style>

</head>
<body>
<div id="app" class="clinbrain-container document-record steps-background" v-loading.fullscreen.lock="loading"
     element-loading-text="正在加载数据..." element-loading-background="transparent" v-cloak
     style="overflow:hidden;margin-top:-4px;">
    <div class="header" v-if="HospitalConfig.Name != 'FSSY'">
        <el-form size="mini" :inline="true" style="background-color:rgb(58, 65, 95);height:48px;">

            <el-form-item label="日期：" style="margin-left:10px;">
                <el-date-picker type="daterange" v-model="requestModel.dates" style="margin-top:10px;"
                                range-separator="~"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="诊断：">
                <el-input v-model="requestModel.Content" size="mini" style="width:150px;margin-top:10px;"></el-input>
            </el-form-item>


            <el-form-item>
                <i class="el-icon-search clinbrain-i-search" style="margin-top:18px;color:white"
                   v-on:click="search"></i>
            </el-form-item>
        </el-form>
    </div>

    <div class="steps-container" v-if="HospitalConfig.Name != 'FSSY'">
        <i class="el-icon-arrow-left" v-on:click="changeTimeAxisPage(-1)"></i>
        <div class="clinbrain-steps">
            <div></div>
            <div>
                <div v-for="(item,index) in timeAxis" v-on:click="timeAxisClick(item)"
                     :class="item==activeTimeAxis?'clinbrain-step is-active':'clinbrain-step'">
                    <div class="header" :title="item.diagname">{{item.diagname}}</div>
                    <div class="circular"></div>
                    <div class="footer" :title="item.inhospitaldate">{{item.inhospitaldate}}</div>
                </div>
            </div>
        </div>
        <i class="el-icon-arrow-right" v-on:click="changeTimeAxisPage(1)"></i>
    </div>
    <div class="left" v-bind:class="HospitalConfig.Name == 'FSSY'?'FSSYClass':''">
        <div class="header">病历列表</div>
        <div class="scrollbar-tree">
            <el-tree ref="elTree"
                     :data="treeData"
                     :props="defaultProps"
                     @node-click="nodeClick"
                     :default-expand-all="false"
                     :default-expanded-keys="defaultExpandedKeys"
                     :render-content="renderContent"
                     highlight-current
                     node-key="id"></el-tree>
        </div>
    </div>
    <div id="rightDiv" class="right" v-bind:class="HospitalConfig.Name == 'FSSY'?'FSSYClass':''">
        <div class="clinbrain-card" style="height:calc(100% - 35px);width:100%;">
            <div class="clinbrain-card-header"><span>病历文书详情</span></div>
            <div style="height:calc(100% - 10px);width:100%;" class="clinbrain-card-body">
                <div class="com-not-data" v-if="isNotData">
                    暂无数据
                </div>
                <div style="height:100%;overflow:auto;">

                    <div v-if="isNotData==false && HospitalConfig.Name=='BinZhou'" style="height:100%">
                        <div style="height:100px; line-height:30px" v-html="infoHeader"></div>
                        <textarea style="width:100%; height:calc(100% - 20px)">{{infoText}}</textarea>
                    </div>

                    <iframe id="preframe" frameborder="0" style="margin:0px;padding:0px;border:none;width:100%"
                            :src="url" scrolling="no"
                            onload="document.getElementById('preframe').height=document.documentElement.clientHeight+20"
                            v-else-if="isNotData==false && HospitalConfig.Name=='Wener'"></iframe>

                    <iframe v-else-if="isNotData==false && isRTF==false  && HospitalConfig.Name=='YanTai'"
                            :src='documentUrl' style="width:100%;height:100%; margin:0px; padding:0px; border:none;"
                            frameborder="0" scrolling="auto"></iframe>
                    <div v-else-if="isNotData==false && HospitalConfig.Name=='sdyz'"
                         style="width:100%;height:100%; margin:0px; padding:0px; border:none;">

                    </div>

                    <div v-else-if="isNotData==false && isRTF==true  && HospitalConfig.Name=='YanTai'" id="content"
                         class="divRtf"></div>

                    <div v-else-if="isNotData==false && HospitalConfig.Name=='GXZL'" class="hljs"
                         style="width:100%;height:auto;white-space:pre-wrap" v-html="medicalInfo">

                    </div>
                    <div v-html="medicalInfo" v-else-if="isNotData==false"></div>
                </div>

            </div>
        </div>
    </div>
</div>
</body>

<script type="text/javascript">

    var app = new Vue({
        el: "#app",
        data() {
            return {
                loading: false,
                isNotData: true,
                requestModel: {
                    dates: [],

                    Content: ""
                },
                IsLR: false,
                treeData: [],
                timeAxis: [],//当前显示时间轴数据
                timeAxisResult: [],//所有时间轴结果
                timeAxisPageSize: 8,//时间轴显示数量
                timeAxisCurrentNumber: 0,//时间轴当前显示下标
                activeTimeAxis: {},//选中时间轴
                selectedDate: "",
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                medicalInfo: "",
                DoctypeID: "",
                infoHeader: '',
                infoText: '',
                defaultExpandedKeys: [],
                pdfUrl: "/Demo/pdf/",
                currentNodeKey: "",//当前选中树节点
                url: '',//电子病历路径
                documentUrl: '',
                isRTF: false
            }
        },
        methods: {
            search() {
                this.getTimeAxis();
            },
            getDate(index) {
                if (this.requestModel.dates && this.requestModel.dates.length >= index + 1) {
                    return this.requestModel.dates[index];
                }
                return null;
            },
            getTimeAxis() {
                var _this = this;
                this.loading = true;
                var param = {
                    patientId: clinBrain.getParam("patientId"),
                    OporIpVn: clinBrain.getParam("visitNumber"),
                    opOrIp: clinBrain.getParam("oporIp"),
                    B1000: "",
                    Sdate: this.getDate(0), Edate: this.getDate(1),
                    Content: this.requestModel.Content,
                }
                clinBrain.request({
                    url: "/pms/query",
                    params: {
                        code: "com.base.api.cdr.PersonalDiagnosis",
                        params: param
                    }
                }, this).success(function (resp) {
                    _this.loading = false;
                    resp.data.Data = resp.data.Data.map(item => {
                        return {
                            inhospitaldate: new Date(item.DxDate).format('yyyy-MM-dd'),
                            visitnumber: item.VisitNumber,
                            diagname: item.HosDxName,
                            patientid: item.PatientID
                        }
                    });
                    if ((param.Sdate != '' && param.Sdate != null) || (param.Edate != '' && param.Edate != null) || param.Content != '') {
                        _this.timeAxisResult = resp.data.Data;
                    } else {
                        _this.timeAxisResult = resp.data.Data.insert(0, {
                            inhospitaldate: "全部",
                            visitnumber: "",
                            diagname: "全部"
                        });
                    }
                    //_this.timeAxisResult = clinBrain.distintTimeAxis(clinBrain.getDataTable(resp, "PersonalQuery.GetTimeAxisByInHospitalDate").insert(0, { inhospitaldate: "全部", visitnumber: "", diagname: "全部" }));
                    _this.timeAxisCurrentNumber = 8;
                    _this.timeAxis = _this.timeAxisResult.split(_this.timeAxisPageSize);
                    if (_this.timeAxis) {
                        _this.timeAxisClick(_this.timeAxis[0]);
                    }
                });
            },
            /**
             * 时间轴分页
             * method
             * param {int} val 上一页-1，下一页1
             */
            changeTimeAxisPage(val) {
                if (val == -1 && this.timeAxisCurrentNumber == this.timeAxisPageSize) {
                    this.$message({message: "已到最前端"});
                    return;
                }
                if (val == 1 && this.timeAxisCurrentNumber >= this.timeAxisResult.length) {
                    this.$message({message: "已到最末端"});
                    return;
                }
                this.timeAxisCurrentNumber += val;
                this.timeAxis = this.timeAxisResult.take(this.timeAxisCurrentNumber - this.timeAxisPageSize).split(this.timeAxisPageSize);
            },

            renderContent(h, {node, data, store}) {
                var className = data.children && data.children.length > 0 ? "iconfont clinBrain-folder" : "iconfont clinBrain-empty"
                return h("span", [h("i", {class: className}), h("span", data.label)])
            },
            nodeClick(node) {
                this.medicalInfo = "";
                this.DoctypeID = "";

                if (node.tag != undefined) {

                    var _this = this
                    clinBrain.request({
                        url: "/pms/query",
                        params: {
                            code: "com.base.api.cdr.MedicalRecordInfoDetail",
                            params: {
                                key: node.tag.Key
                            }
                        }
                    }, _this).success(function (resp) {

                        var item = {};
                        item.tag = resp.data.Data[0];
                        _this.medicalInfo = item.tag.docText;
                        _this.DoctypeID = item.tag.DoctypeID;

                    });
                }
            },
            stringToBinaryArray(string) {
                var buffer = new ArrayBuffer(string.length);
                var bufferView = new Uint8Array(buffer);
                for (var i = 0; i < string.length; i++) {
                    bufferView[i] = string.charCodeAt(i);
                }
                return buffer;
            },

            timeAxisClick(item) {
                var _this = this;
                this.treeData = [];
                this.isNotData = true;
                if (item != null && item != undefined) {
                    this.selectedDate = item.inhospitaldate;
                    this.activeTimeAxis = item;
                    this.loading = true;
                    this.currentNodeKey = null;
                    clinBrain.request({
                        url: "/pms/query",
                        params: {
                            code: "com.base.api.cdr.MedicalRecordInfo",
                            params: {
                                patientId: clinBrain.getParam("patientId"),
                                OporIpVn: clinBrain.getParam("visitNumber"),
                                opOrIp: clinBrain.getParam("oporIp"),
                                visitNumber: '' + item.visitnumber
                            }
                        }
                    }, this).success(function (resp) {
                        _this.loading = false;
                        _this.treeData = [];
                        var num = 0;
                        resp.data.Data.sort((a, b) => {
                            return b.visitNumber - a.visitNumber
                        });
                        resp.data.Data.forEach(item => {
                            item.MedicalRecordField.sort((a, b) => {
                                return a.Docdate - b.Docdate
                            })
                        });
                        var result = resp.data.Data;
                        for (var i = 0; i < result.length; i++) {
                            //if (!result[i].MedicalRecordField) { continue; }
                            //病历文书记录
                            var medicalRecordField = result[i].MedicalRecordField;
                            if (!medicalRecordField || medicalRecordField.length == 0) {
                                continue;
                            }
                            //日期-（住院、门诊）-科室
                            var label = new Date(result[i].InHospitalDate).format("yyyy-MM-dd") + " " + result[i].OPorIP + " " + result[i].CurrentDeptName;
                            //去重判断（是否已经添加过）
                            if (_this.treeData.where("$.label=='" + label + "'").length > 0)
                                continue;

                            _this.treeData.push({label: label, children: [], tag: undefined, id: result[i].Id});
                            num = _this.treeData.length - 1;
                            for (var p = 0; p < medicalRecordField.length; p++) {
                                if (_this.treeData[num].children.where("$.label=='" + medicalRecordField[p].DocTypeName + "'").length == 0) {
                                    _this.treeData[num].children.push({
                                        label: medicalRecordField[p].DocTypeName,
                                        children: [],
                                        tag: undefined,
                                        id: i + "-" + _this.treeData[num].children.length
                                    });
                                }
                                var date1 = ModifyConfig.DateToDate(medicalRecordField[p].Docdate);
                                if (date1 != "-")
                                    date1 = new Date(date1);
                                label = date1.format("yyyy-MM-dd hh:mm") + " " + medicalRecordField[p].DocTypeName;
                                if (_this.treeData[num].children.where("$.label == '" + medicalRecordField[p].DocTypeName + "'").length > 0) {
                                    _this.treeData[num].children.where("$.label == '" + medicalRecordField[p].DocTypeName + "'")[0].children.push({
                                        label: label,
                                        tag: medicalRecordField[p],
                                        id: medicalRecordField[p].Id
                                    });
                                }
                                if (!_this.currentNodeKey) {

                                    _this.currentNodeKey = medicalRecordField[p].Id;

                                    _this.nodeClick({tag: medicalRecordField[p]});

                                }
                            }
                        }
                        _this.$nextTick(function () {
                            _this.$refs.elTree.setCurrentKey(_this.currentNodeKey);
                        });
                        _this.defaultExpandedKeys.push(_this.currentNodeKey);
                        _this.isNotData = !_this.treeData || _this.treeData.length == 0;
                    });
                } else
                    this.loading = false;
            }

        },
        created: function () {
            this.getTimeAxis();
        }
    });
</script>
<style type="text/css">
    .el-scrollbar__wrap {
        height: 100%;
    }

    .el-scrollbar__view {
        height: 100%;
    }

    textarea {
        border: none;
        outline: none;
    }

    .hljs {
        line-height: 1.8;
        font-size: 14px;
        padding: 10px 15px;
        background-color: #fafafa;
        border: 1px solid #eaeefb;

        border-radius: 4px;
        -webkit-font-smoothing: auto;
        box-sizing: border-box;
    }
</style>
<script type="text/javascript">
    var watermsg = HospitalConfig.FullName + '：' + '@ViewBag.UserId';
    $(function () {
        setTimeout(function () {
            if (HospitalConfig.IsBLSY)
                waterMark$($("#rightDiv"), watermsg);
        }, 500);

    });
    window.onresize = function () {
        if (HospitalConfig.IsBLSY)
            waterMark$($("#rightDiv"), watermsg);
    }
</script>
<style>
    .divRtf {
        margin: 20px 0 0 20px;
    }

    .divRtf span {
        height: 40px;
        line-height: 40px;
    }

    .divRtf img {
        width: 150px;
    }

    .divRtf div:first-child {
        border-top: 1px solid #000;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
    }

    .divRtf div {
        border-bottom: 1px solid #000;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
    }
</style>

</html>


